import { useRef, useEffect } from "react";

const RefComp = () => {
  const refNode = useRef<HTMLDivElement>(null); // 只读，不可给ref.current赋值
  const refNumber = useRef<number | null>(null);
  const refTimer = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    console.log(refNode.current);

    refNumber.current = window.setTimeout(() => {
      console.log("refNumber");
    }, 1000);

    refTimer.current = setTimeout(() => {
      console.log("refTimer");
    }, 1000);

    return () => {
      if (refNumber.current) window.clearTimeout(refNumber.current);
      if (refTimer.current) {
        clearTimeout(refTimer.current);
      }
    };
  }, []);

  return <div ref={refNode}>RefComp</div>;
};

export default RefComp;
